// dashboard page blocks
@import 'layout_variables';
@import './variables';

body.caerp {

	&.manage-view,
	&.company_index-view {
		.page-header-block .message {
			padding-top: var(--variable-vertical-padding-l);
		}

		ul.activities {
			padding-bottom: var(--padding-m);

			a {
				color: var(--text-color);
				display: flex;
				font-size: .825rem;
				justify-content: space-between;
				flex-direction: row-reverse;
				line-height: 1.5;
				text-decoration: none;

				&:hover,
				&:focus,
				&:active {
					text-decoration: underline;
				}
			}

			.activity_time {
				padding-left: var(--padding-m);
				white-space: nowrap;
			}
		}
	}

	.dashboard {
		flex-wrap: wrap;
		justify-content: space-around;
		margin: var(--negative-padding-m);

		.columns {
			column-count: 2;
			padding-bottom: var(--padding-xl);
			padding-top: var(--padding-m);
		}

		.dash_elem {
			background: var(--screen-background-color);
			box-shadow: 0 0 5px var(--box-shadow-color);
			display: inline-block;
			margin: var(--padding-m);
			page-break-inside: avoid;
			-webkit-break-inside: avoid;
			break-inside: avoid;
			width: calc(100% - 20px);

			h2 {
				page-break-before: avoid;
				-webkit-break-before: avoid;
				break-before: avoid;
			}

			p.message {
				margin: var(--padding-s) var(--padding-m);
			}

			.panel-body>p {
				margin: 0 var(--padding-m);
			}

			ul {
				list-style-type: none;
				margin: 0;
				padding: var(--padding-m);

				&.favourites {
					align-items: center;
					flex-wrap: wrap;
					padding: 5px 0 0 5px;
					justify-content: center;

					li {
						flex: 0 0 50%;
						margin: 0;
						padding: 0;
					}

					button,
					a {
						align-items: center;
						display: flex;
						height: 4em;
						line-height: 1.25;
						margin: 0 5px 5px 0;
						text-align: left;
						width: calc(100% - 5px);

						svg {
							height: 2.5em;
							flex: 0 0 2.5em;
							margin: 0 10px 0 -10px;
						}

						&:hover,
						&:focus,
						&:active {
							text-decoration: none;
						}
					}
				}
			}
		}

		.alert {
			margin: var(--padding-s);
			padding: var(--padding-m);

			p+p,
			p+ul {
				margin-top: var(--padding-s);
			}

			li {
				padding: var(--padding-s) 0;
			}
		}

		h2 {
			align-items: center;
			background: var(--title-background-color);
			border-bottom: 1px solid var(--border-color);
			display: flex;
			height: 2.4em;
			justify-content: stretch;
			line-height: 1;
			position: relative;
			width: 100%;

			.icon:first-child {
				align-items: center;
				background: var(--theme-color);
				display: flex;
				flex: 0 0 2.5em;
				height: 2.5em;
				justify-content: center;

				svg {
					display: block;
					fill: var(--theme-text-color);
					height: 2em;
					width: 2em;
				}
			}

			.icon.caution:first-child {
				background: var(--func-caution-color);
			}

			.icon.invalid:first-child {
				background: var(--func-negative-color);
			}

			.icon.close {
				align-self: flex-start;
				flex: 0 0 1.75em;
			}

			.icon:first-child+span,
			a>span {
				display: block;
				display: -webkit-box;
				flex: 1 1 auto;
				line-clamp: 2 "…";
				max-height: 2.4em;
				overflow: hidden;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.icon:first-child+span {
				padding-left: var(--padding-m);
			}

			a {
				align-items: center;
				display: flex;
				color: var(--text-color);
				flex: 1 1 auto;
				justify-content: space-between;
				padding-left: var(--padding-m);
				text-decoration: none;

				svg {
					fill: var(--form-main-button-background-color);
					flex: 0 0 auto;
					margin: 0 var(--padding-s);
					opacity: .25;
				}

				&:hover,
				&:focus,
				&:active {
					text-decoration: none;

					svg {
						opacity: 1;
					}
				}
			}
		}

		table {
			margin: var(--padding-m) var(--padding-s);
			width: calc(100% - 10px);

			thead tr:first-child th[scope="col"] {
				height: auto;
			}
		}
	}

	.main_toolbar+.dashboard {
		padding-top: var(--padding-m);
	}
}

@media (min-width: $extrawideWidth ) {
	body.caerp .dashboard {
		.columns {
			column-count: 3;
		}
	}
}

@media (min-width: $tabletWidth ) {
	body.caerp .dashboard {
		.col {
			width: 50%;
		}
	}
}

@media (max-width: $tabletWidth ) {
	body.caerp .dashboard {
		padding-top: var(--padding-m);

		.columns {
			column-count: 1;
			display: flex;
			flex-direction: column;

			#tasklist_container {
				order: 1;
			}

			#event_container {
				order: 2;
			}

			#unpaid_invoices_container {
				order: 3;
			}
		}

		.col {
			width: 100%;
		}

		ul.favourites {

			button,
			a {
				height: 3.5em;

				svg {
					height: 2em;
					flex-basis: 2em;
					margin: 0 5px 0 -10px;
				}
			}
		}
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp .main_area .dashboard.layout.flex {
		max-width: calc(100vw - 10px);

		.dash_elem {
			width: calc(100vw - 25px);
		}

		ul.favourites li {
			flex: 0 0 100%;

			a {
				height: 3em;

				svg {
					height: 1.5em;
					flex-basis: 1.5em;
				}
			}
		}
	}
}